<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<title>项目宝</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/custom.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="color: red;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-btn-link mui-pull-right" id="editProject">编辑</a>
			<h1 class="mui-title">项目编辑</h1>
		</header>

		<div class="mui-content">

			<form class="mui-input-group" method="post" action="<s:url value='save.action'/>">
			    <input type="hidden" name = "projectInfo.pjId" value="<s:property value='projectInfo.pjId'/>">
				<div class="mui-input-row" style="margin: 5px;">
					<label>项目名称：</label>
					<input type="text" class="mui-input-clear" id="pjName" name="projectInfo.pjName" value="<s:property value='projectInfo.pjName'/>" >
				</div>
				<div class="mui-input-row" style="margin: 5px;">
					<label>项目级别：</label>
					<s:select id="pjLevel" name="projectInfo.pjLevel" list="#{'1':'高','2':'中','3':'低'}" headvalue="1"  selectedvalue="<s:property value='projectInfo.pjLevel'/>"></s:select>
				</div>
				<div class="mui-input-row" style="margin: 5px;">
					<label>开始日期</ri>：</label>
					<input type="date" id="pjStartTime" name="projectInfo.pjStartTime" class="mui-input-clear" value="<s:property value='projectInfo.pjStartTime'/>">
				</div>
				<div class="mui-input-row" style="margin: 5px;">
					<label>预计结束：</label>
					<input type="date" id="pjExpectEndTime" name="projectInfo.pjExpectEndTime" class="mui-input-clear" value="<s:property value='projectInfo.pjExpectEndTime'/>">
				</div>
				<div class="mui-input-row" style="margin: 5px;">
					<label>实际结束：</label>
					<input type="date" id="pjEndTime" name="projectInfo.pjEndTime" class="mui-input-clear" value="<s:property value='projectInfo.pjEndTime'/>">
				</div>
				<div class="mui-input-row" style="margin:5px;">
					<label style="word-wrap: break-word;word-break: keep-all;overflow: hidden;"><div id="field-range-val"></div></label>
					<input type="range" name="projectInfo.pjCompleteStatus" id='field-range' value="<s:property value='projectInfo.pjCompleteStatus'/>" min="1" max="6" />
				</div>
				
				<div class="mui-textarea-row" style="margin: 10px 20px;">
					<dl class="checkedBox">
						<dt>您已选择：</dt>
						<s:iterator value="selectUserList" status="selectAll">
						<dd><a href="#" onclick="delSel(this,${pjUserId})">${pjUserName}</a>
						        <input type="hidden" id="useridname${pjUserId}" value="${pjUserId}">
						</dd>
						</s:iterator>
					</dl>
				<div class="screenList">
					<dl class="screenItem" id="item1">
						<dt>所有人员:</dt>
						<s:iterator value="allUserList" status="all">
						<dd><a href="#" onclick="addSel(this,${pjUserId})">${pjUserName}</a></dd>
						</s:iterator>
						<div class="clear"></div>
					</dl>
				</div>
				</div>

				<div class="mui-textarea-row" style="margin:10px 20px;">
					<label>简单记述：</label>
					<textarea id="pjComment" name="projectInfo.pjComment"  rows="4"  class="mui-input-speech mui-input-clear"><s:property value='projectInfo.pjComment'/></textarea>
				</div>
				<hr style="width:90%">
				<input type="hidden" name="saveUserId" id="saveUserId" value="">
				<div class="mui-button-row" id="savetest">
					<button type="submit" class="mui-btn mui-btn-primary"onclick="saveuserId()">保存</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger" onclick="return false;">重置</button>
				</div>
			</form>
		</div>
		<script src="js/mui.min.js"></script>

		<script>

			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			//监听input事件，获取range的value值，也可以直接element.value获取该range的值
			var rangeList = document.querySelectorAll('input[type="range"]');
			
			for (var i = 0, len = rangeList.length; i < len; i++) {
				rangeList[i].addEventListener('input', function() {
					var neirong = "";
					if (this.value == '1') {
						neirong = "事前准备";
					} else if (this.value == '2') {
						neirong = "项目设计";
					} else if (this.value == '3') {
						neirong = "项目开发";
					} else if (this.value == '4') {
						neirong = "单元测试";
					} else if (this.value == '5') {
						neirong = "结合测试";
					} else if (this.value == '6') {
						neirong = "项目结束";
					}
					document.getElementById(this.id + '-val').innerHTML = neirong;
				});
			}
			
				var rangeList = document.querySelectorAll('input[type="range"]');
				var value = rangeList[0].value;
				var neirong = "";
				if (value == '1') {
					neirong = "事前准备";
				} else if (value == '2') {
					neirong = "项目设计";
				} else if (value == '3') {
					neirong = "项目开发";
				} else if (value == '4') {
					neirong = "单元测试";
				} else if (value == '5') {
					neirong = "结合测试";
				} else if (value == '6') {
					neirong = "项目结束";
				}
				document.getElementById('field-range-val').innerHTML = neirong;
				
	            mui('#savetest')[0].style.display="none";
	            mui('body').on('tap','#editProject',function(){
	                mui('#savetest')[0].style.display="block";
	            }); 
	            
		</script>
		
		<script language="javascript" type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">	
$(function(){
	$(".screenList dl:last").attr("style","border-bottom:0px");
});
function addSel(obj,scBox){debugger;
	var checkValue = obj.innerHTML;
	$(".checkedBox").append("<dd><a href='#' onclick='delSel(this,\"" + scBox + "\")'>"+ checkValue +"</a>  <input type='hidden' id='useridname"+scBox+"' value='"+scBox+"'>  </dd>");
	$(obj).parent().remove();
}
function delSel(obj,parentId) {debugger;
	var checkValue = obj.innerHTML;
	$("#item1 div").before("<dd><a href='#' onclick='addSel(this,"+parentId+")'>" + checkValue + "</a></dd>");
	$(obj).parent().remove();
}
function saveuserId() {
	$("[id*='useridname']").each(function(){
		$("#saveUserId").val ($(this).val()+","+$("#saveUserId").val ());
	  });
	
	return true;
}
</script>
	</body>

</html>